<template>
  <el-dialog :visible.sync="dialog" width="480px" :close-on-click-modal="false" :before-close="reset">
    <span slot="title" class="dialog-title">{{ title }}</span>
    <div class="dialog_info">
      <el-form ref="form" :inline="true" :model="form" :rules="rules" label-width="110px">
        <el-form-item label="权限名称" prop="permissionName">
          <el-input v-model="form.permissionName" placeholder="权限名称" clearable />
        </el-form-item>
        <el-form-item label="权限编码" prop="permissionCode">
          <el-input v-model="form.permissionCode" placeholder="权限编码" clearable />
        </el-form-item>
        <el-form-item label="权限鉴权类型" prop="permissionAuthType">
          <el-select v-model="form.permissionAuthType" placeholder="类型" disabled>
            <el-option label="前端权限" value="client" />
            <el-option label="后台权限" value="web" />
          </el-select>
        </el-form-item>
        <el-form-item label="权限类型" prop="permissionType">
          <el-select v-model="form.permissionType" placeholder="类型" :disabled="form.permissionAuthType==='client'">
            <el-option label="菜单" value="menu" />
            <el-option label="按钮" value="button" />
          </el-select>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.remark" placeholder="描述" clearable />
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="reset">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { addPermission } from '@/api/permissions'
export default {
  name: 'UserDialog',
  props: {
    dialog: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      form: {
        status: 1,
        permissionName: '',
        permissionCode: '',
        permissionType: '',
        permissionAuthType: '',
        permissionExpression: 1,
        remark: '',
        authPid: 0,
        id: ''
      },
      title: '添加',
      rules: {
        permissionName: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
        permissionCode: [{ required: true, message: '请输入权限编码', trigger: 'blur' }],
        permissionType: [{ required: true, message: '请输入权限类型', trigger: 'change' }],
        permissionAuthType: [{ required: true, message: '请选择权限鉴权类型', trigger: 'change' }]
      }
    }
  },
  watch: {
    dialog(dialog) {
      for (const key in this.form) {
        this.form[key] = this.row[key]
      }
      if (this.form.permissionAuthType === 'client') {
        this.form.permissionType = 'menu'
      }
      this.form.status = this.form.status * 1
      setTimeout(() => {
        this.$refs.form.clearValidate()
      }, 10)
    }
  },
  methods: {
    reset() {
      this.$emit('reset', 'dialog1')
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          addPermission(this.form).then(res => {
            if (res.code * 1 === 200) {
              this.$message({
                message: `${this.title}成功`,
                type: 'success',
                showClose: true
              })
              this.$emit('submit', 'dialog1')
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.dialog_info {
  .el-input,
  .el-select {
    width: 220px;
  }
}
</style>

